<template>
	<div class="app-container">
		<template v-if="photoList.length > 0">
			<el-carousel type="card">
				<el-carousel-item v-for="(item, index) in photoList" :key="index">
					<el-image :src="ossUrl + item" :preview-src-list="[ossUrl + item]" style="width: 300px;height: 300px;" fit="fit">
						<div slot="error" class="image-slot">
							图片未上传
						</div>
					</el-image>
				</el-carousel-item>
			</el-carousel>
		</template>
		<template v-else>
			<el-empty description="暂无信息"></el-empty>
		</template>
	</div>
</template>

<script>
export default {
	props: {
		doctor: {}
	},
	data() {
		return {
			photoList: [],
			ossUrl: this.$ossUrl
		};
	},
	mounted() {

	},
	methods: {},
	watch: {
		doctor: function() {
			this.photoList.push(this.doctor.badge);
			this.photoList.push(this.doctor.certificate);
			this.photoList.push(this.doctor.credentials);
		}
	}
}
</script>

<style lang="scss" scoped>
	::v-deep .el-carousel__item {
		text-align: center;
	}

	::v-deep .image-slot {
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 14px;
		color: #c0c4cc;
		vertical-align: middle;
		width: 300px;
		height: 300px;
		line-height: 300px;
	}
</style>
